<template>
    <div>
        <h1>子组件</h1>
        <h1>{{ info }}</h1>
        <h2>{{ obj }}</h2>
        <h2>{{ msg.msg }}</h2>
        <h2>{{ msg1 }}</h2>
        <h2>vue2当中attrs的用法</h2>
        <h2>{{ $attrs.msg }}</h2>
        <button @click="pinchuan">拼串</button>
        <grand-son></grand-son>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import GrandSon from './GrandSon.vue';
export default defineComponent({
    components: { GrandSon },
    props:{
        info:{
            type:String,
            required:true,
            default:"xxx",
        },
        obj:{
            type:String,
            required:false,
            default: () => { 
                return {};
            },
        },
    },
    emits:["fun","foo"],
    setup(props,context){
        console.log(props);
        console.log(props.info);
        console.log(props.obj);
        console.log(context);
        console.log(context.attrs);
        console.log(context.attrs.msg);
        const msg = context.attrs;
        const msg1 = ref(context.attrs.msg);
        console.log(context.emit);
        context.emit("fun","大伙都精神精神");
        function pinchuan(){
            context.emit("fun","大伙好好敲代码");
            context.emit("foo");
        };
        console.log(context.slots);
        return{
            msg,
            msg1,
            pinchuan,
        };
    },
    mounted(){
        console.log(this.$attrs);
    },
});
</script>

<style scoped>

</style>